<template>
  <div class="title" :class="isLine?'line':''">
    <div class="left">
      <img :src="titleIcon" alt="">
      <span>{{ titleName }}</span>
      <div class="num" v-if="titleNum !== null ||  titleNum !== undefined" :style="{'backgroundColor': titleNumColor}">{{ titleNum }}</div>
      <slot name="titleLeft"></slot>
    </div>
    <div class="right">
      <slot name="titleRight"></slot>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    titleName:{
      type: String,
      default: '默认标题'
    },
    isLine:{
      type:Boolean,
      default:false
    },
    titleIcon:{
      type:String,
      default:require('@/assets/images/icon/icon-title.png')
    },
    titleNum:undefined,
    titleNumColor:{
      type:String,
      default:'#f2473d'
    },

  },
  data() {
    return {}
  },
  mounted() {

  },
  methods: {

  },
}
</script>

<style lang="scss" scoped>
* {

}
.line{
  padding-bottom: 12px;
  border-bottom: 1px solid #D1D5DC;
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*margin-bottom: 6px;*/

  .left {
    display: flex;
    align-items: center;

    img {
      width: 24px;
      // height: 27px;
      height: 24px;
    }

    span {
      margin-left: 8px;
      margin-right: 6px;
      //color: #1164bd;
      color: rgba(12, 123, 242, 1);
      font-family: OPPOSans;
      font-weight: bold;
      font-size: 16px;
    }
    .num{
      padding: 0 6px;
      font-weight: bold;
      font-size: 14px;
      color: #ffffff;
      border-radius: 39px;
      background: #f2473d;
      margin-bottom: 9.5px;
    }
  }
  .right{
    display: flex;
    align-items: center;
  }
}
</style>
